<template>
	<view class="content">
		<!-- 返回 -->
		<image
			class="return"
			@click="$goReturn(1)"
			src="/static/images/chicken/arrow_go.png"
			mode="widthFix"></image>
		<!-- 规则 -->
		<image
			class="rule"
			@click="showRule"
			src="/static/images/chicken/game/question_rule.png"
			mode="widthFix"></image>
		<!-- 问题区 -->
		<view class="question-box">
			<!-- 倒计时 -->
			<view class="box-time">
				<text>{{ times }}</text>
			</view>
			<view class="box-box">
				<view class="box-content">
					<!-- 进度条 -->
					<view class="box-process">
						<view>已答题</view>
						<view class="box-line">
							<u-line-progress
								:percent="percent" 
								:round="true" 
								inactive-color="#E4E1D3"
								style="width: 420rpx;"
								active-color="linear-gradient(to right, #faa54b 0%, #ff7d3d 100%)">
								<text>{{ currentQuestion + 1 }}/{{ questionList.length }}</text>
							</u-line-progress>
							<image
								class="my-icon"
								src="/static/images/chicken/game/question_feed.png" 
								mode="widthFix"></image>
						</view>
						<view class="result">+{{ feedNum }}</view>
					</view>
					<!-- 问题 -->
					<view class="box-list">
						<view class="list-title">
							<view>
								<text class="num">{{ currentQuestion + 1 }}</text>
								<text class="line">|</text>{{ question.type }}
							</view>
							<view>(选择你的答案进入下一题)</view>
						</view>
						<view class="list-name">
							{{ question.name }}
						</view>
						<view class="list-option">
							<view
								v-for="(val, index) in question.options"
								:key="index"
								@click="chooseOption(val)"
								class="option">
								<view
									:class="{
										text: true,
										choose: val.choose,
									}">
									<text>{{ val.name }}</text>
									<text>{{ val.text }}</text>
									<u-icon
										v-if="val.name == question.rightOption"
										class="flag"
										color="#fff"
										size="42"
										name="checkmark" />
									<u-icon
										v-else
										class="flag"
										color="#fff"
										size="42"
										name="close" />
								</view>
								<image
									v-if="!val.choose"
									src="/static/images/chicken/game/question_item.png"
									mode="widthFix"></image>
								<image
									v-else
									src="/static/images/chicken/game/question_item_c.png"
									mode="widthFix"></image>
							</view>
						</view>
						<view class="list-btn">
							<text 
								v-if="isNext"
								@click="nextQuestion">下一题</text>
							<text v-else @click="$goReturn(1)">返回</text>
						</view>
					</view>
				</view>
				<image
					class="box-bg"
					src="/static/images/chicken/game/question_rect.png"
					mode="widthFix"></image>
			</view>
			<!-- <image
				style="width: 100%;"
				src="/static/images/chicken/game/question_list_bg.png"
				mode="widthFix"></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				times: 60,
				timer: null,
				currentQuestion: 0,
				feedNum: 0,
				questionList: [
					{
						name: '这里是题目这里是题目这里是题目？这里是题目这里是题目这里是题目这里是题目这里是题目这里是题目？',
						type: '单选',
						rightOption: 'A',
						options: [
							{ name: 'A', choose: false, text: '这里是选项内容' },
							{ name: 'B', choose: false, text: '这里是选项内容' },
							{ name: 'C', choose: false, text: '这里是选项内容' },
							{ name: 'D', choose: false, text: '这里是选项内容' },
						],
					},
					{
						name: '这里是题目这里是题目这里是题目？这里是题目这里是题目这里是题目这里是题目这里是题目这里是题目？',
						type: '单选',
						rightOption: 'C',
						options: [
							{ name: 'A', choose: false, text: '这里是选项内容' },
							{ name: 'B', choose: false, text: '这里是选项内容' },
							{ name: 'C', choose: false, text: '这里是选项内容' },
							{ name: 'D', choose: false, text: '这里是选项内容' },
						],
					}
				],
			}
		},
		computed: {
			question() {
				return this.questionList[this.currentQuestion];
			},
			isNext() {
				return this.currentQuestion < this.questionList.length - 1;
			},
			percent() {
				let num = (this.currentQuestion + 1) / this.questionList.length;
				return Math.round(num * 100);
			},
		},
		mounted() {
			this.init();
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			init() {
				this.djs();
			},
			djs() {
				this.timer = setInterval(() => {
					this.times -= 1;
					if (this.times <= 0) {
						clearInterval(this.timer);
						this.nextQuestion();
					}
				}, 1000);
			},
			showRule() {
				console.log('规则');
			},
			chooseOption(val) {
				this.question.options.forEach(v => {
					v.choose = false;
				});
				val.choose = true;
				if (!this.isNext) {
					if (this.question.rightOption == val.name) {
						this.feedNum += 10;
					}
					setTimeout(() => {
						this.$goReturn(1);
					}, 500);
				} else {
					setTimeout(() => {
						this.nextQuestion();
					}, 500);
				}
			},
			nextQuestion() {
				if (this.isNext) {
					clearInterval(this.timer);
					let obj = this.question.options.find(v => v.choose);
					if (this.question.rightOption == obj?.name) {
						this.feedNum += 10;
					}
					this.currentQuestion += 1;
					this.times = 60;
					this.djs();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url('/static/images/chicken/game/question_bg1.png') no-repeat center center;
		background-size: 100%;
		.return {
			position: absolute;
			left: 26rpx;
			top: 30rpx;
			width: 64rpx;
		}
		.rule {
			position: absolute;
			right: 23rpx;
			top: 10rpx;
			width: 100rpx;
		}
		.question-box {
			position: absolute;
			left: 32rpx;
			bottom: 40rpx;
			z-index: 1;
			width: calc(100% - 64rpx);
			// background-color: #fff;
			.box-time {
				position: relative;
				z-index: 1;
				display: flex;
				justify-content: center;
				text {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 136rpx;
					height: 136rpx;
					background: url('/static/images/chicken/game/question_circle.png') no-repeat center center;
					background-size: 100% 100%;
					transform: translateY(50%);
					font-size: 66rpx;
					font-weight: bold;
					font-family: DIN Alternate, DIN Alternate-Bold;
					color: #FF7D3D;
				}
			}
			.box-box {
				position: relative;
				width: 100%;
				.box-bg {
					width: 100%;
				}
				.box-content {
					position: absolute;
					left: 54rpx;
					top: 86rpx;
					z-index: 1;
					width: calc(100% - 108rpx);
					::v-deep .u-active {
						border-radius: 40rpx;
					}
					.box-process {
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 52rpx;
						color: #FF7D3D;
						.box-line {
							position: relative;
							image {
								position: absolute;
								right: 0;
								top: -5rpx;
								width: 50rpx;
							}
						}
						.result {
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.box-list {
						margin-top: 40rpx;
						color: #732011;
						.list-title {
							display: flex;
							align-items: baseline;
							font-size: 32rpx;
							> view:first-of-type {
								display: flex;
								align-items: baseline;
								font-weight: bold;
								text.num {
									margin-right: 4rpx;
									font-size: 46rpx;
								}
								text.line {
									font-weight: normal;
								}
							}
							> view:last-of-type {
								margin-left: 10rpx;
								font-size: 24rpx;
								opacity: .6;
							}
						}
						.list-name {
							margin: 36rpx 0 40rpx;
							line-height: 50rpx;
							font-size: 32rpx;
							font-weight: 500;
						}
						.list-option {
							padding: 6rpx 33rpx 36rpx;
							.option {
								position: relative;
								&:not(:last-of-type) {
									margin-bottom: 30rpx;
								}
								.text {
									position: absolute;
									left: 0;
									top: 0;
									z-index: 1;
									display: flex;
									align-items: center;
									width: 100%;
									height: 100%;
									padding: 0 50rpx;
									font-size: 32rpx;
									text:first-of-type {
										margin-right: 30rpx;
										font-size: 44rpx;
										font-weight: bold;
									}
									.flag {
										position: absolute;
										right: 50rpx;
										top: 50%;
										transform: translateY(-50%);
									}
									&.choose {
										color: #fff;
									}
								}
								image {
									width: 100%;
								}
							}
						}
						.list-btn {
							width: 240rpx;
							height: 60rpx;
							line-height: 60rpx;
							margin: auto;
							background: #ffe5c9;
							border-radius: 30rpx;
							text-align: center;
							text {
								opacity: .6;
							}
						}
					}
				}
			}
		}
	}
</style>